<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<h2>小人跑步动画</h2>
	<img id="img1" src="pao.png" />
	<input id="btngo" type="button" value="开始" onclick="init()" />
	<br/>
	<canvas id="mycanvas" width="600px" height="600px" style="border:1px solid black;"></canvas>
    <div id="mycanvas"></div>
</div>
</body>
</html>
<style>
	body{text-align: center;}
</style>
<script>
	var startflag =false;
	var frames = [];
	for (var i = 0; i < 8; i++) {
		frames[i] = [i*137,0]
	}
	function $(id){
		return document.getElementById(id)
	}
	var fwidth = 137,fheight=137;

	function init(){
		if(!startflag){
			var context = $("mycanvas").getContext("2d");
			var fIndex = 0;
			timer = setInterval(function(){
				context.clearRect(0,0,500,500)
				context.drawImage(img1,frames[fIndex][0],frames[fIndex][1],fwidth,fheight,100,100,fwidth*1,fheight*1)
			fIndex++;
			if(fIndex>=8){
				fIndex=0
			}
			},100)

			startflag = true;
			$("btngo").value = "停止"
		}else{
			startflag = false;
			$("btngo").value = "开始"
			clearInterval(timer)
		}
	}
</script>

<h2>方向键控制人物行走动画</h2>
<style>
#myCanvas1 {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="myCanvas1" width="600" height="400"></canvas>
<div id="myCanvas1"></div>
<script type="text/javascript">
	
var Person = function(ctx) {
// 绘制工具
this.ctx = ctx || document.getElementById('myCanvas1').getContext('2d');
// 图片路径
this.src = 'go.png';
// 画布的大小
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
// 定义行走的参数
this.stepSize = 5; // 步伐大小
this.direction = 0; // 0往前 ，1往左，2往右，3往后
this.stepX = 0; // 行走方向
this.stepY = 0; // 行走方向
//初始化方法
this.init();
};
// 定义初始化方法
Person.prototype.init = function() {
//保存当前this
var that = this;
// 加载图片
this.loadImage(function(image) {
// 图片的大小
that.imageWidth = image.width;
that.imageHeight = image.height;
// 人物的大小
that.personWidth = that.imageWidth / 4;
that.personHeight = that.imageHeight / 4;
// 绘制图片的起点
that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
that.y0 = that.canvasHeight / 2 - that.personHeight / 2;

// 默认绘制在中心位置朝外
that.ctx.drawImage(image, // 图片
0, 0, // 从图片的坐标位置开始
that.personWidth,that.personHeight, // 截取多大的图片
that.x0, that.y0, // 从画布的起点开始
that.personWidth, that.personHeight); // 画多大

// 添加方向键控制图片的行走
that.index = 0;
document.onkeydown = function(e) {
if(e.keyCode == 37) {
// 左
that.direction = 1;
that.stepX--;
that.drawImage(image);
// 前
}else if(e.keyCode == 38) {
that.direction = 3;
that.stepY--;
that.drawImage(image);
}else if(e.keyCode == 39) {
// 右
that.direction = 2;
that.stepX++;
that.drawImage(image);
}else if(e.keyCode == 40) {
// 后
that.direction = 0;
that.stepY++;
that.drawImage(image);
}
}
});
};

// 加载图片的方法
Person.prototype.loadImage = function(callback) {
var image = new Image();
image.onload = function() {
callback && callback(image);
};
image.src = this.src;
};

Person.prototype.drawImage = function(image) {
this.index++;
// 清除画布
this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);
// 默认绘制在中心位置朝外
this.ctx.drawImage(image, // 图片
this.index * this.personWidth, this.direction * this.personHeight, // 从图片的坐标位置开始
this.personWidth,this.personHeight, // 截取多大的图片
this.x0 + this.stepX * this.stepSize, this.y0 + this.stepY * this.stepSize, // 从画布的起点开始
this.personWidth, this.personHeight); // 画多大

if(this.index >= 3) {
this.index = 0;
}
};

new Person();

</script>
</body>
    
    <h2>鼠标在页面上的互动</h2>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: white;
        }
    </style>
<body>
    <canvas id="mycanvas3"></canvas>
    <script>
        var ctx = document.getElementById('mycanvas3')
            context = ctx.getContext('2d')
            Width = document.documentElement.clientWidth
            Height = document.documentElement.clientHeight
            ctx.width = Width
            ctx.height = Height
            color = 55
            rounds = []
        function Round_item (index, x, y, r, color) {
            this.index = index
            this.x = x
            this.y = y
            this.r = r
            this.color = 'hsl('+ color +',100%,80%)'
        }
        Round_item.prototype.draw = function () {
            context.fillStyle = this.color
            context.beginPath()
            context.arc(this.x, this.y, this.r, 0, 2*Math.PI, false)
            context.closePath()
            context.fill()
        }
        window.onmousemove = function (event) {
            rounds.push({
                x: event.clientX,
                y: event.clientY,
                r: 3,
            })
        }
        function animate () {
            // 清空画布
            context.clearRect(0, 0, Width, Height)
            for (let i = 0; i < rounds.length; i ++) {
                // 半径每次增大0.9
                rounds[i].r += 0.9
                // 由于hsl的颜色范围是1-360
                if (color > 360) {
                    color = 55
                }
                // 颜色变化
                color += 0.1
                rounds[i] = new Round_item(i, rounds[i].x, rounds[i].y, rounds[i].r, color)
                rounds[i].draw()
                // 圆的半径大于10就在下一次勾勒得时候消失
                if (rounds[i].r > 10) {
                    rounds.splice(i, 1)
                }
            }
            requestAnimationFrame(animate)
        }
        animate()
    </script>
</body>

<h1>张嘴吃豆子</h1>
    <div>
        <canvas id="c2" width="500" height="400"></canvas>
    </div>
<script>
        var ctx = c2.getContext("2d");//创建画笔
        var flag = true;//设置条件
        var eyes = function () {//绘制眼睛
            ctx.beginPath();//开始路径
            ctx.arc(275, 100, 10, 0 * Math.PI / 180, 360 * Math.PI / 180);//创建圆弧
            ctx.strokeStyle = "black";//设置样式
            ctx.lineWidth = 20;//设置线宽
            ctx.stroke();//描边
        };
        var eyeball = function () {//绘制眼球
            ctx.beginPath();//开始路径
            ctx.arc(280, 100, 4, 0 * Math.PI / 180, 360 * Math.PI / 180);//创建圆弧
            ctx.strokeStyle = "#fff";//设置样式
            ctx.lineWidth = 8;//设置线宽
            ctx.stroke();//描边
        };
        var face = function () {//绘制张嘴时的脸
            ctx.beginPath();//开始路径
            var start = 45;//起始角
            var end = 315;//结束角
            ctx.arc(250, 200, 150, start * Math.PI / 180, end * Math.PI / 180);//创建圆弧
            ctx.lineTo(250, 200);//画直线
            ctx.closePath();//闭合路径
            ctx.strokeStyle = "red";//设置样式
            ctx.lineWidth = 10;//设置线宽
            ctx.stroke();//描边
            eyes();//调用画眼睛
            eyeball();//调用画眼球
        };
        var face1 = function () {//绘制闭嘴时的脸
            ctx.beginPath();//开始路径
            var start1 = 0;//起始角
            var end1 = 360;//结束角
            ctx.arc(250, 200, 150, start1 * Math.PI / 180, end1 * Math.PI / 180);//创建圆弧
            ctx.lineTo(250, 200);//画直线
            ctx.strokeStyle = "red";//设置样式
            ctx.lineWidth = 10;//设置线宽
            ctx.stroke();//描边
            eyes();//调用画眼睛
            eyeball();//调用画眼球
        };
        var ball = function () {//绘制张嘴时的豆子
            x = 350;//设定圆弧x坐标
            ctx.beginPath();//开始路径
            ctx.arc(x, 200, 10, 0 * Math.PI / 180, 360 * Math.PI / 180);//创建圆弧
            ctx.strokeStyle = "yellow";//设置样式
            ctx.lineWidth = 20;//设置线宽
            ctx.stroke();//描边
        };
        var ball1 = function () {//绘制闭嘴时的豆子
            x1 = 450;//设定圆弧x坐标
            ctx.beginPath();//开始路径
            ctx.arc(x1, 200, 10, 0 * Math.PI / 180, 360 * Math.PI / 180);//创建圆弧
            ctx.strokeStyle = "yellow";//设置样式
            ctx.lineWidth = 20;//设置线宽
            ctx.stroke();//描边
        };
        var clear = function () {//清除画布函数
            ctx.clearRect(0, 0, 500, 400)
        };
 
        setInterval(function () {//设定定时器,切换状态
            if (flag == true) {
                clear();
                face();
                ball();
                flag = false
            } else if (flag == false) {
                clear();
                face1();
                ball1();
                flag = true
            }
        }, 300)
 
    </script>
